<script lang="ts">
import { defineComponent, ref, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
export default defineComponent({
    setup() {
        let router: any = useRouter();
        let route: any = useRoute();
        let payClassjson: any = localStorage.getItem("order");
        let payClass: any = ref(JSON.parse(payClassjson) || []);
        let order = payClass.value;
        localStorage.setItem('ordermanage', JSON.stringify(order));
        console.log('order', order);
        let unfinish: any = ref(null);
        let alwayfinish: any = ref(null);
        let active = ref(0)
        console.log(payClass.value);
        let back = () => {
            router.back();
        }
        let todraft = (videoid: any) => {
            router.push({
                path: '/addvideo',
                query: {
                    videoid,
                    draftflag: 1,
                }
            })
        }
        alwayfinish.value = order.filter((item: any) => {
            return item.payment == 1;
        })
        unfinish.value = order.filter((item: any) => {
            return item.payment == 0;
        });
        let click_del = (type: any, index: any,id:any) => {
            console.log(type, index);
            if (type == 1) {
                order.splice(index, 1);
                localStorage.setItem('order', JSON.stringify(order));
              
            }
            if (type == 2) {
                let index = order.findIndex((item: any) => item.groupId == id);
                order.splice(index, 1);
                localStorage.setItem('order', JSON.stringify(order))
            }
            if (type == 3) {
                let index = order.findIndex((item: any) => item.groupId == id);
                order.splice(index, 1);
                localStorage.setItem('ordermanage', JSON.stringify(order))
            }
            alwayfinish.value = order.filter((item: any) => {
                    return item.payment == 1;
                })
                unfinish.value = order.filter((item: any) => {
                    return item.payment == 0;
                });
        }
        //跳转订单详情页
        let toOrderDes = (groupId:any) => {
            router.push({
                path: '/OrderDes',
                query: {
                    groupId,
                }
            })
        }
        return {
            back,
            payClass,
            todraft,
            alwayfinish,
            unfinish,
            active,
            click_del,
            toOrderDes,
            order
        }
    }
})
</script>
<template>
    <div>
        <div class="desbar">
            <span class="iconfont icon-xiangzuojiantou" @click="back"> </span>
            <h2>我的订单</h2>
        </div>
        <van-tabs v-model:active="active" line-width="30" color="red">
            <van-tab title="全部">
                <div class="drafList" v-if="order">
                    <p v-if="order.length == 0">暂无订单哦~</p>
                    <ul v-else>
                        <li v-for="(item, index) in order" @click="toOrderDes(item.groupId)">
                            <van-swipe-cell>
                                <van-card 
                                :price="item.price" 
                                :desc="item.data.ownerInfo.nickName"
                                    :title="item.data.groupName" class="goods-card" :value="'订单时间:' + item.newtime"
                                    :thumb="item.data.avatar">
                                    <div class="newtime">
                                        <p>订单时间{{ item.newtime }}</p>
                                    </div>
                                </van-card>
                                <template #right>
                                    <van-button square text="删除" type="danger" class="delete-button"
                                        @click="click_del(1, index,item.groupId)" />
                                </template>
                            </van-swipe-cell>

                        </li>
                    </ul>

                </div>
            </van-tab>
            <van-tab title="未完成">
                <div class="drafList" v-if="payClass">
                    <p v-if="unfinish.length == 0">暂无订单哦~</p>
                    <ul v-else>
                        <li v-for="(item,index) in unfinish" @click="toOrderDes(item.groupId)">
                            <van-swipe-cell>
                                <van-card :price="item.price" :desc="item.data.ownerInfo.nickName"
                                    :title="item.data.groupName" class="goods-card" :value="'订单时间:' + item.newtime"
                                    :thumb="item.data.avatar">
                                    <div class="newtime">
                                        <p>订单时间{{ item.newtime }}</p>
                                    </div>

                                </van-card>
                                <template #right>
                                    <van-button square text="删除" type="danger" class="delete-button" @click="click_del(2, index,item.groupId)"/>
                                </template>
                            </van-swipe-cell>
                        </li>
                    </ul>

                </div>
            </van-tab>
            <van-tab title="已完成">
                <div class="drafList" v-if="payClass">
                    <p v-if="alwayfinish.length == 0">暂无订单哦~</p>
                    <ul v-else>
                        <li v-for="(item,index) in alwayfinish" @click="toOrderDes(item.groupId)">
                            <van-swipe-cell>
                                <van-card :price="item.price" :desc="item.data.ownerInfo.nickName"
                                    :title="item.data.groupName" class="goods-card" :value="'订单时间:' + item.newtime"
                                    :thumb="item.data.avatar">
                                    <div class="newtime">
                                        <p>订单时间{{ item.newtime }}</p>
                                    </div>

                                </van-card>
                                <template #right>
                                    <van-button square text="删除" type="danger" class="delete-button" @click="click_del(3, index,item.groupId)"/>
                                </template>
                            </van-swipe-cell>
                        </li>
                    </ul>

                </div>
            </van-tab>

        </van-tabs>

    </div>
</template>
<style lang="scss" scoped>
::v-deep .van-card {
    padding: 0;
}

::v-deep .van-swipe-cell {
    flex: 1;
}

::v-deep .van-card__title {
    font-size: 14px;
}

::v-deep .van-card__price {
    color: red;
    font-weight: 600;

    #text {
        display: none;
    }
}

.desbar {
    display: flex;
    line-height: 44px;
    padding: 0 10px;
    position: sticky;
    z-index: 10;
    top: 0;

    span {
        font-size: 18px;
        font-weight: 600;
    }

    h2 {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        font-size: 16px;

        // margin-left: 50px;
    }
}

.drafList {
    padding: 20px 15px;

    &>p {
        text-align: center;
        color: #a8a5a5;
    }

    .goods-card {
        margin: 0;
        background-color: white;
    }

    .delete-button {
        height: 100%;
    }

    ul {
        li {
            display: flex;
            margin-bottom: 10px;
            width: 100%;

            .image {
                // position: relative;
                width: 50%;
                height: 100px;
                background-position: center;
                background-size: 10%;

                img {
                    width: 100%;
                    height: 100px;
                    border-radius: 10px;
                }
            }

            .word {
                margin-left: 5px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                flex: 1;

                .title {
                    font-size: 14px;
                    margin-bottom: 5px;
                    font-weight: 600;

                    p {
                        color: #000;
                    }

                    span {
                        color: #a8a5a5;
                    }
                }

                .nickName {
                    p {
                        font-size: 12px;
                        color: #a8a5a5;
                        line-height: 20px;
                    }
                }

                .newtime {
                    font-size: 12px;
                    color: #a8a5a5;
                    margin-bottom: 6px;
                }

                .price {
                    color: red;
                    font-weight: 600;

                }
            }
        }
    }
}</style>